<template>
	<view class="flex-col justify-start relative page">
		<view class="flex-col section space-y-60">
			<view class="flex-row justify-center relative">
				<image class="image pos"
					src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777480137488403283.png" />
				<text class="text">卡券配置</text>
			</view>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" inactive-color="#8D8D8D"
				active-color="#5FFF95" :active-item-style="activeItemStyle"></u-tabs>
			<view class="flex-row justify-between items-center group">
				<text class="text_2">铁西沈辽路店</text>
				<view class="flex-row space-x-7">
					<text class="font_1 text_3">切换门店</text>
					<image class="shrink-0 image_2" src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400650594751651.png" />
				</view>
			</view>
		</view>
		
		<view class="flex-col group_2 space-y-60 pos_4" v-if="current==0">
			<view class="flex-col section_3">
				<view class="flex-row justify-between items-center group_3 view">
					<view class="flex-row items-center">
						<text class="font_5">*</text>
						<text class="font_3">会员卡名称</text>
					</view>
					<input placeholder="请输入会员卡名称" placeholder-style="font-size:26rpx;text-align:right;color:#ACACAC;"
						style="margin-right: 20px;width: 110px; height: 30px;" />
				</view>
				<view class="flex-row justify-between items-center group_3">
					<view class="flex-row items-center">
						<text class="font_5">*</text>
						<text class="font_3">有效期</text>
					</view>
					<view class="flex-row items-center group_4 space-x-15" style="width: 240rpx; height: 40rpx;">
						<u-input v-model="value" :type="type" :border="border" @click="show = true" />
						<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback">
						</u-action-sheet>
					</view>
				</view>
				<view class="flex-row justify-between group_5">
					<view class="flex-row items-center">
						<text class="font_5">*</text>
						<text class="font_3">会员卡折扣</text>
					</view>
					<view class="flex-row items-center group_6 space-x-15" style="width: 240rpx; height: 40rpx;">
						<u-input v-model="discountvalue" :type="type" :border="border" @click="show1 = true" />
						<u-action-sheet :list="discountList" v-model="show1" @click="discountCallback">
						</u-action-sheet>
					</view>
				</view>
				<view class="flex-row justify-between items-center group_3">
					<view class="flex-row items-center">
						<text class="font_5">*</text>
						<text class="font_3">充值金额</text>
					</view>
					<input placeholder="请输入充值金额" placeholder-style="font-size:26rpx;text-align:right;color:#ACACAC;"
						style="margin-right: 20px;width: 110px; height: 30px;" />
				</view>
				<view class="flex-col group_7">
					<view class="flex-row justify-between items-center group_8">
						<view class="flex-row items-center">
							<text class="font_5">*</text>
							<text class="font_3">赠送金额</text>
						</view>
						<input placeholder="请输入赠送金额" placeholder-style="font-size:26rpx;text-align:right;color:#ACACAC;"
							style="margin-right: 20px;width: 110px; height: 30px;" />
					</view>
					<view class="flex-col group_8 space-y-31">
						<view class="flex-row justify-between items-center group_9">
							<view class="flex-row items-baseline">
								<text class="font_5">*</text>
								<text class="font_3">优惠券图片</text>
							</view>
							<view class="flex-row items-center section_5 space-x-7">
									<u-upload ref="uUpload" :action="action" :auto-upload="false" :max-count="1"></u-upload>
							</view>
						</view>
					</view>
				</view>
				<view class="flex-col group_9 space-y-21">
					<text class="self-start font_3 text_10">会员卡说明</text>
					<view class="flex-col justify-start items-start text-wrapper_2">
						<view style="width: 300px; height: auto; margin: auto;overflow-y: auto;">
							<textarea placeholder="请输入优惠券说明"></textarea>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col justify-start items-center button"><text class="font_2 text_12">确定</text></view>
		</view>
		<view class="flex-col justify-start items-center text-wrapper pos_3"><text class="font_2 text_5">优惠券</text>
		</view>
		<view class="flex-col items-center section_2 space-y-15 pos_2">
			<text class="text_4">会员卡</text>
			<view class="section_4"></view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				value: '',
				discountvalue: '',
				type: 'select',
				show1: false,
				show: false,
				border: true,
				// 演示地址，请勿直接使用
				action: 'http://www.example.com/upload',
				fileList: [{
					url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
				}],
				actionSheetList: [{
						text: '3个月'
					},
					{
						text: '9个月'
					},
					{
						text: '12个月'
					}
				],
				discountList: [{
						text: '3折'
					},
					{
						text: '9折'
					},
					{
						text: '1折'
					}
				],
				list: [{
					name: '会员卡'
				}, {
					name: '优惠券'
				}],
				current: 0
			};
		},

		methods: {
			change(index) {
				this.current = index;
				console.log(this.current)
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.value = this.actionSheetList[index].text;
			},
			discountCallback(index) {
				this.discountvalue = this.discountList[index].text;
			},
			submit() {
				this.$refs.uUpload.upload();
			},
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			},
		},
	};
</script>

<style>
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}
	/deep/ .u-list-item {
		width: 160rpx !important;
		height: 160rpx !important;
	    background: #ffffff !important;
	    border: dashed 2rpx #19c865 !important;
	
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.page {
		padding-bottom: 1272rpx;
		background-color: #f3f3f5;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.section {
		padding: 104rpx 23rpx 494rpx;
		background-image: linear-gradient(0deg, #f3f3f5 0%, #19c865 61%, #19c865 100%);
	}

	.image {
		width: 20rpx;
		height: 34rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 34rpx;
	}

	.group {
		padding: 0 8rpx;
	}

	.text_2 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 31rpx;
	}

	.font_1 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
	}

	.text_3 {
		color: #ffffff;
		font-weight: 700;
	}

	.image_2 {
		width: 24rpx;
		height: 22rpx;
	}

	.group_2 {
		padding: 0 30rpx;
	}

	.space-y-60>view:not(:first-child),
	.space-y-60>text:not(:first-child),
	.space-y-60>image:not(:first-child) {
		margin-top: 60rpx;
	}

	.pos_4 {
		position: absolute;
		left: 0;
		right: 0;
		top: 355rpx;
	}

	.section_3 {
		padding-left: 29rpx;
		padding-top: 49rpx;
		background-color: #ffffff;
		border-radius: 0px 24rpx 24rpx 24rpx;
	}

	.group_3 {
		margin-top: 46rpx;
		padding: 0 8rpx 42rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.view {
		margin-top: 0;
	}

	.font_5 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 13rpx;
		font-weight: 500;
		color: #ffa229;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		font-weight: 500;
		color: #222222;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		font-weight: 500;
		color: #999999;
	}

	.text_6 {
		margin-right: 18rpx;
	}

	.group_4 {
		margin-right: 32rpx;
	}

	.image_3 {
		width: 24rpx;
		height: 14rpx;
	}

	.group_5 {
		padding: 44rpx 8rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_6 {
		margin-right: 32rpx;
	}

	.space-x-15>view:not(:first-child),
	.space-x-15>text:not(:first-child),
	.space-x-15>image:not(:first-child) {
		margin-left: 15rpx;
	}

	.text_7 {
		margin-right: 18rpx;
	}

	.group_7 {
		padding-bottom: 43rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_8 {
		padding: 46rpx 8rpx 42rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.text_8 {
		margin-right: 18rpx;
	}

	.view_2 {
		margin-top: 36rpx;
	}

	.section_5 {
		margin-right: 22rpx;
		padding: 10rpx 9rpx 10rpx 13rpx;
		background-color: #ffffff;
		border-radius: 4rpx;
		height: 48rpx;
	}

	.space-x-7>view:not(:first-child),
	.space-x-7>text:not(:first-child),
	.space-x-7>image:not(:first-child) {
		margin-left: 7rpx;
	}

	.image_4 {
		width: 18rpx;
		height: 18rpx;
	}

	.text_9 {
		color: #19c865;
		font-weight: 500;
	}

	.image_5 {
		margin-right: 31rpx;
		margin-top: 29rpx;
		background-color: #f3f3f5;
		border-radius: 16rpx;
		width: 630rpx;
		height: 350rpx;
	}

	.group_9 {
		padding: 36rpx 0 39rpx;
	}

	.space-y-21>view:not(:first-child),
	.space-y-21>text:not(:first-child),
	.space-y-21>image:not(:first-child) {
		margin-top: 21rpx;
	}

	.text_10 {
		margin-left: 25rpx;
		line-height: 27rpx;
	}

	.text-wrapper_2 {
		margin-right: 31rpx;
		margin-top: 21rpx;
		padding: 29rpx 0 59rpx;
		background-color: #f3f3f5;
		border-radius: 16rpx;
		border: solid 1rpx #eeeeee;
	}

	.text_11 {
		margin-left: 33rpx;
		line-height: 27rpx;
	}

	.button {
		padding: 30rpx 0;
		background-color: #19c865;
		border-radius: 44rpx;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 28rpx;
	}

	.text_12 {
		color: #ffffff;
		font-weight: 700;
	}

	.text-wrapper {
		padding: 27rpx 0 54rpx;
		background-color: #ffffff80;
		border-radius: 24rpx 24rpx 0px 0px;
		width: 340rpx;
	}

	.pos_3 {
		position: absolute;
		right: 32rpx;
		top: 283rpx;
	}

	.text_5 {
		color: #369861;
		font-weight: 500;
	}

	.section_2 {
		padding: 40rpx 0 2rpx;
		background-color: #ffffff;
		border-radius: 24rpx 24rpx 0px 0px;
		width: 340rpx;
	}

	.space-y-15>view:not(:first-child),
	.space-y-15>text:not(:first-child),
	.space-y-15>image:not(:first-child) {
		margin-top: 15rpx;
	}

	.pos_2 {
		position: absolute;
		left: 30rpx;
		top: 270rpx;
	}

	.text_4 {
		color: #19c865;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 29rpx;
	}

	.section_4 {
		background-color: #19c865;
		border-radius: 2rpx;
		width: 40rpx;
		height: 4rpx;
	}
</style>